<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IT书城</title>
    <link rel="icon" type="image/x-icon" href="/static/images/logoIcon.icon">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/static/css/detail.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
    <script type="text/javascript" src="/static/js/detail.js"></script>

</head>
<body th:style="'background-color : ' + ${session.config.color1}">
<div class="container">
    <div class="book-view">
        <div class="book-card">
            <div class="block-book">
                <div class="picture">
                    <img th:src="${serialize.serialize.sAddress}">
                </div>

                <div class="content-view">
                    <div class="title-xc">
                        <div style="float: left;">
                            <span>书名:</span><span th:text="${serialize.serialize.sTitle}"></span>
                            <input id="sId" type="hidden" th:value="${serialize.serialize.sId}"/>
                        </div>
                        <div style="float:right;font-size: 15px;">
                            <a href="/user/serialize" style="color: black;">返回书城</a>
                        </div>
                        
                    </div>
                    
                    <div class="content-xc">
                        <div class="author-xc">
                            <div class="author-name">
                                作者:<a href="" th:text="${serialize.user.uName}"></a>
                            </div>
                            <div class="content-body">
                                <span>内容概括:</span>
                                <p th:text="${serialize.serialize.sIntroduction}"></p>
                            </div>
                            <div class="author-information">
                                个性标语: <span class="brief-description" th:text="${serialize.user.uSingnature}"> </span>
                            </div>
                            <div class="evaluate">
                                <span>点赞量:</span><span th:text="${serialize.serialize.sPraise}"></span>
                                <span>收藏量:</span><span th:text="${serialize.serialize.sCollection}"></span>
                                <span>阅读量:</span><span th:text="${serialize.serialize.sRead}"></span>
                                <span>评论量:</span><span th:text="${serialize.serialize.sComment}"></span>
                            </div>
                            <div  style="margin:10px 0;color: red;font-size: 18px;">
                                <span class="recommend" th:text="${serialize.serialize.sRecommend}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="money">
                        <div class="buy-book">
                            <!-- 弹出购买模态框 -->
                            <button class="buy-button">购买书籍</button>
                               <div class="bg-model">
                                 <div class="card">
                                    <div class="disappear">x</div>
                                    <div class="card-content">
                                        <h3>确认购买书籍</h3>
                                        <div class="card-list">
                                            <div class="tip-all">支付总额</div>
                                            <div class="consumption" th:text="${serialize.serialize.sPrice}"></div>
                                            <div class="consumption">￥</div>
                                        </div>
                                            <form action="/pay/goAlipay" method="POST">
                                            <input name="type" type="hidden" value="1">
                                            <input name="name" type="hidden" th:value="${serialize.serialize.sTitle}">
                                            <input name="money" type="hidden" th:value="${serialize.serialize.sPrice}">
                                            <input name="message" type="hidden" value="支付信息">
                                            <button type="submit" class="pay-prise" >支付</button>
                                        </form>
                                    </div>
                                    </div>
                                </div>
                            </div>
                           <!-- 连接书内容页面 -->
                            <a th:href="@{/cahpter/ReadSerializeChapter?(sId=${serialize.serialize.sId})}" >
                                <button th:if="${isBuy == true}"  class="try-button">开始阅读</button>
                                <button th:if="${isBuy == false}"  class="try-button">试读书籍</button>
                            </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="book-card">
            <div class="table-book">
                <div class="table">目录内容</div>
                <div class="introduction-table" th:each="chapters : ${chapter}">
                    <div class="chapter">
                        <div class="step">
                            <div class="step-but" th:text="${chapters.chNumber}">1</div>
                        </div>
                        <div class="chapter-name">
                            <div class="name-cha" th:text="${chapters.chTitle}">章节名</div>
                            <div class="read-cha">试读</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="entry-book">
                <div class="entry">
                    <div class="title-entry">购买须知</div>
                    <ol>
                        <li>该书一经购买成功概不退款</li>
                        <li>购买电子书只支持在线阅读，暂不能在PC客户端进行下载阅读</li>
                        <li>书籍都是原创，不存在翻版或者抄袭</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>